{% extends 'front/base.html' %}

{% block title %}
  个人中心
{% endblock %}

{% block head %}
  <style>
  .profile-box{
    width: 400px;
    margin: 0 auto;
  }
  .avatar{
    width: 200px;
  }
  </style>
{% endblock %}

{% block body %}
  <div class="profile-box">
  <h1 style="text-align: center;">个人中心</h1>
      <form action="{{ url_for('user.profile_edit') }}" method="post" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <table class="table table-bordered mt-5">
      <tbody>
        <tr>
          <th width="100px">用户名：</th>
          <td>
              {% if ismine %}
              <input type="text" class="form-control" name="username" value="{{ user.username }}">
              {% else %}
              {{ user.username }}
              {% endif %}
          </td>
        </tr>
        <tr>
          <th>头像：</th>
          <td>
          {% if user.avatar %}
          <img src="{{ user.avatar }}" alt="" height="150px" width="150px">
          {% else %}
            <img class="avatar" src="{{ avatars.gravatar(user.email|email_hash)|replace('https://gravatar.com/avatar/','https://gravatar.loli.net/avatar/') }}" alt="">
          {% endif %}
              {% if ismine %}
              <input type="file" name="avatar" accept="image/jpeg, image/png" value="上传头像">
          {% endif %}
          </td>
        </tr>
        <tr>
          <th>签名：</th>
          <td>
              {% if ismine %}
              <input type="text" name="signature" value="{{ user.signature or ''}}">
              {% else %}
              {{ user.signature or ''}}
              {% endif %}
          </td>
        </tr>
      </tbody>
    </table>
      {% if ismine %}
    <div style="text-align: center;">
      <button class="btn btn-primary">保存</button>
    </div>
      {% endif %}
      </form>
  </div>
{% endblock %}